<template>
<div class="indexTable">
  <el-form :model="searchForm">
    <template v-for="formItem in formConfig" >
      <el-input v-if="formItem.type=='input'"  @keyup.enter.native="onSubmit" :key="formItem.id" v-model="searchForm[formItem.name].value" 
      :placeholder="formItem.placeholder"></el-input>
      <el-select  v-if="formItem.type=='select'"  @keyup.enter.native="onSubmit" :key="formItem.id" v-model="searchForm[formItem.name].value" 
      :placeholder="formItem.placeholder">
        <el-option :label="selectItem.label" :value="selectItem.value" v-for="selectItem in formItem.options" :key="selectItem.vlaue"></el-option>
      </el-select>
    </template>

  </el-form>
    <div class="btnContainer">
      <div>
        <el-button v-show="item.show" v-for="item in btnList.left" :key="item.id" :type="item.type" @click.prevent="item.handleClick">{{item.label}}</el-button>
      </div>
      <div>
        <el-button v-show="item.show" v-for="item in btnList.right" :key="item.id" :type="item.type" @click.prevent="item.handleClick">{{item.label}}</el-button>
      </div>
    </div>
  <el-table :height="options.height" :maxHeight="options.maxHeight" :stripe="options.stripe" 
  :border="options.border" :size="options.size" :fit="options.fit" :show-header="options.showHeader"
  :highlight-current-row="options.highlightCurrentRow"  :data="tableData"
  :row-class-name="options.rowClassName" :row-style="options.rowStyle"
  :cell-class-name="options.cellClassName" :cell-style="options.CellStyle" 
  :header-row-class-name="options.headerRowClassName" :header-row-style="options.headerRowStyle"
  :header-cell-class-name="options.headerCellClassName" :header-cell-style="options.headerCellStyle"
  :empty-text="options.emptyText" :default-expand-all="false" @selection-change="handleSelectionChange">
    <!-- 多选框是否显示 -->
    <el-table-column v-if="options.selection && columns.length>0" :fixed="options.selectionFixed"  type="selection" :width="options.selectionWidth||'55'"></el-table-column>
    <!-- 列表 -->
    <el-table-column  :prop="column.prop" :key='column.label' v-for="(column) in columns" :class-name="column.className"
      :label="column.label" :align="column.align || 'center'" :width="column.width" :fixed="column.fixed">
        <template slot-scope="scope">
          <template v-if="column.opretes"  >
            <!-- 自定义的按钮啥的 -->
            <span v-for="opts in column.opretes" :key="opts.id" @click.prevent="opts.method(opts,scope.row)">
              <el-button v-if="opts.type=='button'"  :class="opts.class" ><i :class="opts.icon"></i>{{opts.label}}   </el-button>
              <span v-if="opts.type=='span'" :class="opts.class"  ><i :class="opts.icon"></i>{{opts.label}}</span>
              <el-switch v-if="opts.type=='switch'" :class="opts.class"  v-model="scope.row[column.prop]"></el-switch>
            </span>
          
          </template>
          <span v-else-if="column.formatter"  v-html="column.formatter(scope.row, column)"></span>
          <span v-else > {{scope.row[column.prop]}}</span>
        </template>
    </el-table-column>
  </el-table>
   <el-pagination background :page-sizes="pagination.pageSizes" :total="pagination.total"  :page-size="pagination.pageSize"
    layout="total, sizes, prev, pager, next, jumper"  @size-change="handleSizeChange" :current-page="pagination.page"
      @current-change="handleCurrentChange"></el-pagination>
</div>
 

</template>

<script>
export default {
  props:{
    options:{
      type: Object,
      default: function(){
        return {
          selection: false, // 多选按钮
          height: '800', // string/number
          maxHeight:'', // string/number
          stripe: false, // boolean
          border: false, // boolean
          size:'',//medium / small / mini,
          fit: true, // 列的宽度是否自撑开
          showHeader: true, // 是否显示表头
          highlightCurrentRow: false, // 是否要高亮当前行
          rowClassName: "", // 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
          rowStyle: "", // 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
          cellClassName: "", // 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。
          CellStyle: "", // 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
          headerRowClassName: "",// 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。
          headerRowStyle: null, // 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。
          headerCellClassName: "", //表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。
          headerCellStyle: "", // 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
          emptyText: "暂无数据", //空数据时显示的文本内容，也可以通过 slot="empty" 设置
        }
        
      }
    },
    columns: {
      type: Array,
      default:() => []
    },
    tableData:{
      type: Array,
      default:() => []
    },
    pagination:{
      type: Object,
      default: function () {
        return { 
          total: 0,
          pageSizes: [10, 20, 30, 40, 50, 100],
          pageSize: "100",
          page: 1
        }
      }
    },
    btnList: {
      type: Object,
      default: function(){
        return {
          Left:[],
          right:[]
        }
      }
    },
    searchForm: {
      type: Object,
      default: ()=>{
        return {
        }
      }
    },
    formConfig:{
      type: Array,
      default: ()=>{
        return []
      }
    }
  },
  watch:{
    searchForm:function(o,n){
      console.log(' ',o,n)
    }
  },
  methods:{
    // 多行选中
    handleSelectionChange (val) {
      this.$emit('handleSelectionChange', val)
    },
    handleSizeChange(val){
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange(val){
      this.$emit('handleCurrentChange', val)
    },
    onSubmit(){
      console.log('回车收缩')
      console.log(this)
    }
  }

}
</script>

<style lang="">

</style>